import * as THREE from 'three'
import { City } from './city';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
export const initCity = ()=>{
    const canvas = document.getElementById("webgl")

    const scene = new THREE.Scene();
    const camear = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000)
    camear.position.set(1000,500,20)
    
    scene.add(camear)
    // 相机控件
    const oritControls = new OrbitControls(camear,canvas)
    oritControls.enableDamping = true
    oritControls.enableZoom = true
    oritControls.minDistance = 100
    oritControls.maxDistance= 2000


    // 
    const renderer = new THREE.WebGLRenderer({
        canvas
    })

    // 添加灯光
    scene.add(new THREE.AmbientLight(0xadadda))
    const directionLight = new THREE.DirectionalLight(0xfffff)
    scene.add(directionLight)

    const box = new THREE.BoxGeometry(2,2,2)
    const material = new THREE.MeshLambertMaterial(new THREE.Color(0x00fffff))
    scene.add(new THREE.Mesh(box,material))

    // 使用和屏幕一样的像素比
    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
    renderer.setSize(window.innerWidth,window.innerHeight)
    renderer.setClearColor(new THREE.Color(0x00000),1)
    
    const city = new City(scene,camear,oritControls)

    // 渲染
    renderer.render(scene,camear)

    const clock = new THREE.Clock();
    // 动画
    const start = ()=>{
        city.start(clock.getDelta())
        renderer.render(scene,camear)
        requestAnimationFrame(start)
    }
    start()

    window.addEventListener('resize',()=>{
        oritControls.update()
        // 更新相机的投影矩阵
        camear.aspect = window.innerWidth/window.innerHeight
        camear.updateProjectionMatrix()
        renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
        renderer.setSize(window.innerWidth,window.innerHeight)
    })
}